<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title> 小张送水后台管理系统</title>
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">

    <!--Bootstrap固定框架-->
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
    <!--图标库-->
    <link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
    <!--核心样式-->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <!--axios 在线-->
    <script src="/axios.min.js"></script>
    <script src="https://code.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://code.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://code.hcharts.cn/plugins/zh_cn.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
</head>
<body>

<div id="viewport">

    <!-- Sidebar
    客户列表页面使用th:replace属性替换成主菜单的侧边栏，让代码能够复用
    th:replace="waterMainMenu::sidebar"
    waterMainMenu表示主菜单页面的文件名称
    sidebar表示主菜单页面的片段名称
    -->
    <div id="sidebar" th:replace="waterMainnenu::sidebar">
        <nav class="navbar navbar-default" th:replace="waterMainMenu::navbar">
        </nav>
    </div>
    <!-- Content -->
    <div id="content"/>
    <!--
th:replace="waterMainMenu::navbar"表示将nav标签里面所有的内容替换为主页面的navbar片段
    -->
    <div id="container" style="min-width:400px;height:400px"></div>
    <div class="col-md-12" style="margin-top: 15px">
        <table class="table table-bordered table-hover" border="1px">
            <thead>
            <tr class="success" style="text-align: center">
                <td>序号</td>
                <td>时间</td>
                <td>出库数量</td>
            </tr>
            </thead>
            <tbody>
            <tr th:each="his,in: ${inventories}"  style="text-align: center">
                <td th:text="${in.index}"></td>
                <td th:text="${his.addTime_1}"></td>
                <td th:text="${his.order.getSendWaterCount()}"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <script>
        var total=new Array();
        var time=new Array();
        axios({
            method:"get",
            url:"/getListInventory",

        }).then(function (resp) {
            for (let i = 0; i < resp.data.length; i++) {
                var chartElement = resp.data[i];
                console.log(resp);
                total[i] = chartElement.total;
                time[i] = chartElement.addTime_1;
            }
            console.log(total)
            console.log(time)
            var chart = Highcharts.chart('container', {
                chart: {
                    type: 'areaspline'
                },
                title: {
                    text: '库存量曲线图'
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 150,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                },
                xAxis: {
                    categories: time,
                    // plotBands: [{ // 标识出周末
                    //     from: 4.5,
                    //     to: 6.5,
                    //     color: 'rgba(68, 170, 213, .2)'
                    // }]
                },
                yAxis: {
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    shared: true,
                    valueSuffix: ''
                },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5
                    }
                },
                series: [{
                    name: '剩余数量',
                    data: total
                }]
            });

        })
            // JS 代码
    </script>

</div>
<script src="/jquery.js"></script>"
<script>
    $(document).ready(function (){
        $("#n9").css("background","#FFF");
        $("#n9_1").css("color","#000");
        $("#n9_2").css("color","#000");

    })
</script>
</body>
</html>